<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="robots" content="index, follow">
		<title>{{ config.title }}</title>
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
		<link rel="stylesheet" href="style.css">
		<link rel="icon" href="{{ config.favicon }}">
		<link rel="prefetch" type="application/l10n" href="translations.ini" />
	</head>
	<body>

		<main class="wrapper">

			<nav class="navigation">
				<section class="container">

					<a class="navigation-title" href="">
						<img class="img" src="{{ config.logo }}" height="30">
						<h1 class="title">{{ config.title }}</h1>
					</a>



				</section>
			</nav>

			<section class="container" id="main">
				{% if not panels %}
					<div class="panel operational" data-l10n-id="systems-operational">
						All Systems operational.
					</div>
				{% else %}
					{% for severity, systems in panels.items() if systems %}
					<div class="panel {{ severity }}">
						<span data-l10n-id="{{ severity.capitalize().replace(" ", '-') }}">{{ severity.capitalize() }}</span> <span data-l10n-id="on">on</span> {% for system in systems %}{{ system }}{% if not loop.last %}, {% endif %}{% endfor %}.
					</div>
					{% endfor %}
				{% endif %}

				<h4 data-l10n-id="systems">Systems</h4>
				<ul class="systems">
					{% for system, data in systems.items() %}
					<li>
						{{ system }} <span class="status {{ data.status }}" data-l10n-id="{{ data.status.replace(" ", '-') }}">{{ data.status }}</span>
					</li>
					{% endfor %}
				</ul>

				<h4 data-l10n-id="incidents">Incidents</h4>
				{% if incidents %}
					{% for incident in incidents %}
					<div class="incident">
						<span class="date moment">{{ incident.created }} UTC</span>

						{% if incident.closed %}
							<span class="label operational float-right" data-l10n-id="resolved">resolved</span>
						{% else %}
							<span class="label {{ incident.severity }} float-right" data-l10n-id="{{ incident.severity.replace(" ", '-') }}">{{ incident.severity }}</span>
						{% endif %}
						{% for system in incident.systems %}
							<span class="label system float-right">{{ system }}</span>
						{% endfor %}
						<hr/>

						<span class="title">{{ incident.title }}</span>
						{{ incident.body|safe }}
						{% for update in incident.updates %}
							<p><em>Update <span class="moment">{{ update.created }} UTC</span></em></p>
							{{ update.body|safe }}
						{% endfor %}
					</div>
					{% endfor %}
				{% else %}
					<em data-l10n-id="no.incidents">No incidents in the past 90 days.</em>
				{% endif %}
			</section>


			<footer class="footer">
				<section class="container">
					<hr/>
					<p>{{ config.footer }}</p>
				</section>
			</footer>

		</main>
		<script src="statuspage.js" type="text/javascript"></script>
	</body>
</html>